<template>
    <div>
<el-dialog center width="50%" custom-class="select-vote-div" 
    :visible.sync="LogingVote"
    v-dialogDrag
    :close-on-press-escape="false" 
    :close-on-click-modal="false" 
    :show-close="false"
    :destroy-on-close="true">
    <div slot="title" class="div-text-align-right">
        <img src="@/assets/images/button/62.png" @click="closeSheet" width="46" height="46" alt="">
    </div>
    <!-- <el-transfer style="margin-left: 50px;" 
        v-model="value" :data="data" 
        :titles="['玩家列表', '被举报人']">
    </el-transfer> -->
    <!-- <input type="text" disabled> -->

    <vue-select-image :dataImages="player_list"
                  :is-multiple="true"
                  :h="'80px'"
                  :w="'80px'"
                  :limit="4"
                  :selectedImages="report_list"
                  :useLabel="true" 
                  @click.native="$emit('MusicSound', 'click_two')"
                  @onreachlimit="reach_limit"
                  @onselectmultipleimage="select_image">
    </vue-select-image>

    <div slot="footer" class="dialog-footer">
         <div class="room-list-button">
            <div class="room-list-button-images-div-vote" @click="confirm_report()">
                <img src="@/assets/images/button/26.png" class="room-list-button-images-vote" alt="">
                <span class="room-list-button-text-vote"> 确 认 举 报</span>
            </div>
        </div> 
    </div>

</el-dialog>
    </div>
</template>

<script>
import VueSelectImage from 'vue-select-image';
require('vue-select-image/dist/vue-select-image.css');
export default {
    name:'uioVote',
    props:{
        LogingVote:{
            required: true,//是否是必要传值  可不要时为 false
            type: Boolean, //定义类型 类型  ：字符串类型、
            default: false,   //没有传值的话 默认值 一般与 required:false 一起用
        },
        RoomCode: {
            required: true,//是否是必要传值  可不要时为 false
            type: String, //定义类型 类型  ：字符串类型、
            default: "",   //没有传值的话 默认值 一般与 required:false 一起用
        },
        PlayerCode: {
            required: true,//是否是必要传值  可不要时为 false
            type: String, //定义类型 类型  ：字符串类型、
            default: "",   //没有传值的话 默认值 一般与 required:false 一起用
        },
        PlayerList: {
            required: true,//是否是必要传值  可不要时为 false
            type: Array, //定义类型 类型  ：字符串类型、
            default: [],   //没有传值的话 默认值 一般与 required:false 一起用
        },
    },
    data() {
        return {
            report_list:[],
            player_list: [],
        }
    },
    watch:{
        LogingVote: {
            handler(newValue, oldValue) {
                console.log("LogingVote newValue, oldValue :", newValue, oldValue);
                if (!!newValue) {
                    this.optimization_data();
                }
            },
            deep: true,
        },
    },
    methods: {
        optimization_data() {
            let common_list = [];
            for(let i in this.PlayerList){
                let _info = {};
                _info.id  = this.PlayerList[i].player_code;
                _info.nickname = this.PlayerList[i].nickname;
                _info.src = this.PlayerList[i].cover == '' ? require('@/assets/images/other/good_gray.jpg'): this.PlayerList[i].cover;
                _info.alt = this.PlayerList[i].career_name == '' ? this.PlayerList[i].nickname: this.PlayerList[i].career_name;
                _info.room_code = this.PlayerList[i].room_code;
                _info.player_code = this.PlayerList[i].player_code;
                _info.disabled = false;
                if (this.PlayerList[i].player_code == this.PlayerCode) {
                    _info.disabled = true;
                }
                common_list.push(_info);
            }
            this.player_list = common_list;
        },
        confirm_report() {
            this.$emit('MusicSound', 'click_two');
            if (this.report_list.length < 4) {
                this.$notify.info({title: '', message: '必须要选择四个人呦～'});
                return false;
            }
            this.$confirm('该操作仅可进行一次，且无法撤销，是否继续?', 'Notice', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$emit('MusicSound', 'click_two');
                this.$post('/api/room-report/create.html', {
                    room_code: this.RoomCode,
                    report_list: this.report_list,
                }).then(res => {
                    if (res.code == 200) {
                        this.$emit('closeDialog', 'logingVote', false, 'open');
                        this.$notify.success({ title: '', message: '已成功举报选中玩家，等待其他玩家投票结束'});
                    } else {
                        this.$notify.error({ title: '', message: res.msg});
                    }
                    this.loadingList = false;
                }).catch(err => {
                    this.loadingList = false;
                    console.log(err);
                });
            });
        },
        reach_limit() {
            this.$notify.info({ title: '', message: "最多只能选择四个举报人！"});
        },
        select_image(list) {
            // console.log("select_image", list)
            this.report_list = list;
        },
        closeSheet() {
            this.$emit('closeDialog', 'logingVote', false);
        },
    },
    components: { VueSelectImage },
}
</script>


<style>

.room-list-button-images-div-vote{
    position: relative;
    width: 180px;
    margin: auto;
    padding-top: 10px;
    transition: color 3s ease;
}
.room-list-button-images-vote{
    width: 100%;
}
.room-list-button-images-div-vote:hover {
    .room-list-button-images-vote{
        content: url("/assets/images/button/25.png");
    }
    .room-list-button-text-vote{
        color: #C0C0C0;
    }
}
.room-list-button-text-vote {
    user-select: none;
    z-index: 1;
    position: absolute;
    top: 20px;
    left: 23px;
    font-size: 26px;
    color: #DEB887;
    transition: color 3s ease;
}


.vue-select-image{
    text-align: center;
    border-radius: 10px;
    height: 460px;
    background-color: #fff;
}
.vue-select-image__lbl{
    display: block;
    width: 85px !important;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: black;
}
.vue-select-image__thumbnail--selected{
    background-color: #FA8072;
}
.vue-select-image__thumbnail--disabled{
    background-color: #E6E6FA;
}
.vue-select-image__thumbnail{
    width: 90px;
}
.vue-select-image__item{
    margin-top: 10px;
    margin-left: 10px;
    background-color: #fff;
}
</style>



